import React, {useState} from 'react';
import {View, ScrollView} from 'react-native';
import CheckBox from "@react-native-community/checkbox";
import {Tester, TestCase, TestSuite} from '@rnoh/testerino';

export function CheckboxTest() {
    const [checked, setChecked] = useState(true);
    const [checked1, setChecked1] = useState(true);
    const [checked2, setChecked2] = useState(true);
    const [checked3, setChecked3] = useState(true);
    const [checked4, setChecked4] = useState(false);
    const [checked5, setChecked5] = useState(false);
    const [checked6, setChecked6] = useState(true);
    const [checked7, setChecked7] = useState(false);
    const [checked8, setChecked8] = useState(true);
    const [checked9, setChecked9] = useState(true);
    const [checked10, setChecked10] = useState(true);
    const [checked11, setChecked11] = useState(true);
    const [checked12, setChecked12] = useState(true);
    const [checked13, setChecked13] = useState(true);
    const [checked14, setChecked14] = useState(true);
    const [checked15, setChecked15] = useState(true);
    const [checked16, setChecked16] = useState(true);
    const [checked17, setChecked17] = useState(true);
    const [checked18, setChecked18] = useState(true);
    const [checked19, setChecked19] = useState(true);
  return (
    <ScrollView>
      <View>
        <Tester style={{ paddingBottom: 80 }}>
          <TestSuite name={'checkboxTest'}>
            <TestCase itShould={'default checkbox'}>
              <CheckBox
                value={checked2} 
                onValueChange={(e: any) => {
                  setChecked2(e);
                }}
              />
            </TestCase>
            <TestCase itShould={'checkbox value=true'}>
              <CheckBox
                value={checked3} 
                onValueChange={(e: any) => {
                  setChecked3(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox value=false'}>
              <CheckBox
                value={checked4} 
                onValueChange={(e: any) => {
                  setChecked4(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox testID=test'}>
              <CheckBox 
                value={checked5}
                testID='test'
                onValueChange={(e: any) => {
                  setChecked5(e);
                }} 
              />;
            </TestCase>
            <TestCase itShould={'checkbox disabled=true'}>
              <CheckBox disabled='true' />;
            </TestCase>
            <TestCase itShould={'checkbox onCheckColor=red'}>
              <CheckBox 
                value={checked6}
                onCheckColor={'red'}
                onValueChange={(e: any) => {
                  setChecked6(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox tintColor=blue'}>
              <CheckBox
                value={checked7}
                tintColor={'blue'}
                onValueChange={(e: any) => {
                  setChecked7(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox shape=0'}>
              <CheckBox
                value={checked8} 
                shape={0} 
                onValueChange={(e: any) => {
                  setChecked8(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox shape=1'}>
              <CheckBox 
                value={checked9} 
                shape={1} 
                onValueChange={(e: any) => {
                  setChecked9(e);
                }}
                />;
            </TestCase>
            <TestCase itShould={'checkbox markSize=10'}>
              <CheckBox 
                value={checked10} 
                markSize={10} 
                onValueChange={(e: any) => {
                  setChecked10(e);
                }}
                />;
            </TestCase>
            <TestCase itShould={'checkbox markSize=50'}>
              <CheckBox 
                value={checked11} 
                markSize={50} 
                onValueChange={(e: any) => {
                  setChecked11(e);
                }}
                />;
            </TestCase>
            <TestCase itShould={'checkbox strokeWidth=5'}>
              <CheckBox 
                value={checked12} 
                strokeWidth={5} 
                onValueChange={(e: any) => {
                  setChecked12(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox strokeWidth=10'}>
              <CheckBox 
                value={checked13} 
                strokeWidth={10} 
                onValueChange={(e: any) => {
                  setChecked13(e);
                }}
                />;
            </TestCase>
            <TestCase itShould={'checkbox lineWidth=5'}>
              <CheckBox 
                value={checked14} 
                lineWidth={5} 
                onValueChange={(e: any) => {
                  setChecked14(e);
                }}
                />;
            </TestCase>
            <TestCase itShould={'checkbox lineWidth=10'}>
              <CheckBox 
                value={checked15} 

                lineWidth={10} 
                onValueChange={(e: any) => {
                  setChecked15(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox strokeColor=yellow'}>
              <CheckBox 
                value={checked16} 
                strokeColor={'yellow'} 
                onValueChange={(e: any) => {
                  setChecked16(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox strokeColor=red'}>
              <CheckBox 
                value={checked17} 
                strokeColor={'red'} 
                onValueChange={(e: any) => {
                  setChecked17(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox boxType=circle'}>
              <CheckBox
                value={checked18} 
                boxType={'circle'} 
                onValueChange={(e: any) => {
                  setChecked18(e);
                }}
              />;
            </TestCase>
            <TestCase itShould={'checkbox boxType=square'}>
              <CheckBox 
                value={checked19} 
                boxType={'square'} 
                onValueChange={(e: any) => {
                  setChecked19(e);
                }}
              />;
            </TestCase>
            <TestCase
                itShould="Invoked on change with the native event."
                initialState={false}
                tags={['C_API']}
                arrange={({ setState, state }) => {
                    return (
                        <View>
                            <CheckBox
                                disabled={false}
                                value={checked}
                                onChange={(event) => {
                                    setChecked(event.nativeEvent.value);
                                    setState(true)
                                }}
                                />;
                        </View>
                    )
                }}
                assert={async ({ expect, state }) => {
                    expect(state).to.be.eq(true);
                }}
            />
            <TestCase
                itShould="Invoked with the new boolean value when it changes."
                initialState={false}
                tags={['C_API']}
                arrange={({ setState, state }) => {
                    return (
                        <View>
                            <CheckBox
                                disabled={false}
                                value={checked1}
                                onValueChange={(newValue) => {
                                    setChecked1(newValue);
                                    setState(true)
                                }}
                                />;
                        </View>
                    )
                }}
                assert={async ({ expect, state }) => {
                    expect(state).to.be.eq(true);
                }}
            />
          </TestSuite>
        </Tester>
      </View>
    </ScrollView>
  );
}

export const displayName = 'react-native-community-checkbox';
export const framework = 'React';
export const category = 'UI';
export const title = 'react-native-community-checkbox';
export const documentationURL = 'https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-community-checkbox.md';
export const description = 'react-native-community-checkbox';

export const examples = [
    {
        title: 'react-native-community-checkbox',
        render: function (): any {
            return <CheckboxTest />;
        },
    },
];
